<template>
  <div>
    <template v-if="contentType == 2">
      <form-com class="c-pb100" :relId="fId" :formComList="content" :formInfo="formInfo" @submitForm="submitForm"></form-com>
    </template>
    <div v-else class="c-ph24 c-pb20">
      <div class="c-fc-xblack c-fs26 c-pt30 c-pb20 c-flex-row c-flexw-wrap c-justify-sb" v-if="content.length!=0&&content[0].value==1">
        <span><b class="c-fc-xlred" v-if="content[0].isNeed">*</b>姓名</span>
        <span class="c-fc-xlred" v-if="nameError||telError||remarError">请填写必填信息</span>
      </div>
      <div class="c-bg-white c-flex-row c-aligni-center c-w100" v-if="content.length!=0&&content[0].value==1">
        <div class="c-bd1 c-br10 c-fs24 c-bg-sgray c-hh80 c-flex-row c-flex-grow1 c-w0 c-aligni-center c-ph24 c-justify-center" :class="nameError?'c-bd1-F56C6C':''">
          <input ref="input" class="c-w100 c-fc-xblack" v-model="nameValue" placeholder="请填写你的姓名" maxlength="16" type="text">
        </div>
      </div>
      <div class="c-fc-xblack c-fs26 c-pt40 c-pb20" v-if="content.length!=0&&content[1].value==1">
        <span><b class="c-fc-xlred" v-if="content[1].isNeed">*</b>手机号</span>
      </div>
      <div class="c-bg-white c-flex-row c-aligni-center c-w100" v-if="content.length!=0&&content[1].value==1">
        <div class="c-bd1 c-br10 c-fs24 c-bg-sgray c-hh80 c-flex-row c-flex-grow1 c-w0 c-aligni-center c-ph24 c-justify-center" :class="telError?'c-bd1-F56C6C':''">
          <input ref="input" class="c-w100 c-fc-xblack" v-model="telValue" maxlength="11" placeholder="请填写手机号码" type="tel">
        </div>
      </div>
      <div class="c-fc-xblack c-fs26 c-pt40 c-pb20" v-if="content.length!=0&&content[2].value==1">
        <span><b class="c-fc-xlred" v-if="content[2].isNeed">*</b>{{content[2].name?content[2].name:'备注信息'}}</span>
      </div>
      <div class="c-bg-white c-flex-row c-aligni-center c-w100 c-hh200" v-if="content.length!=0&&content[2].value==1">
        <div class="c-bd1 c-br10 c-fs24 c-bg-sgray c-flex-row c-flex-grow1 c-w0 c-h c-ph24 c-justify-center c-pv24" :class="remarError?'c-bd1-F56C6C':''">
          <textarea ref="textarea" class="c-w100 c-fc-xblack" v-model="remarksValue" maxlength="50" placeholder="请填写，限50个字" type="text">
            </textarea>
        </div>
      </div>
      <div class="c-fs28 c-fc-white c-w100 c-lh80 c-textAlign-c c-br40 theme-bg-gradient c-mt80" :class="clickflag?'':'c-opacity50'" @click="saveInfoContent">提交</div>
    </div>
  </div>
</template>
<script>
import formCom from '@/components/homePage/form/formCom.vue'
import { utilJs } from "@/utils/common.js";
export default {
  name: "PerfectInfo",
  components: {
    formCom
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      dataStatus: 'HAS_MORE_DATA',
      liveList: [],
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
      nameValue: '',
      telValue: '',
      remarksValue: '',
      isClicking: true,
      nameError: false,
      telError: false,
      remarError: false,
      content: [],
      clickflag: false,
      contentType: 0,
      fId: '', // 关联的表单id
      formInfo: {},
    };
  },
  created() {
    utilJs.appShare(this);
  },
  watch: {
    nameValue(val) {
      this.changeFlag()
    },
    telValue(val) {
      this.changeFlag()
    },
    remarksValue(val) {
      this.changeFlag()
    }
  },
  mounted() { },
  methods: {
    changeFlag() {
      if (this.content.length != 0) {
        if (this.content[0].value && this.content[0].isNeed == 1) {
          if (this.nameValue == "") {
            return false
          }
        }
        if (this.content[1].value && this.content[1].isNeed == 1) {
          if (this.telValue == "") {
            return false
          }
        }
        if (this.content[2].value && this.content[2].isNeed == 1) {
          if (this.remarksValue == "") {
            return false
          }
        }
      }
      this.clickflag = true
    },
    //分享
    wechatShare: function () {
      let title = "小班课"; //window.localStorage.getItem("shareTitle");
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/privateClass/classDetail?classId=${localStorage.getItem("classId")}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = "小班课"; //window.localStorage.getItem("shareTitle");
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/privateClass/classDetail?classId=${localStorage.getItem("classId")}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.appShareTrue(title, "", shareUrl, "");
    },
    //获取申请详情
    getJoinInfo() {
      let $this = this
      utilJs.getMethod(
        global.apiurl + `livePrivateClass/${this.classId}/getInfoContent`,
        res => {
          if (res.code == 507) {
            this.$showCjToast({
              text: res.msg,
              type: "warn",
            }).then(() => {
              $this.clickClassId()
            });
            return
          }
          this.formInfo = res;
          this.contentType = res.contentType;
          if (res.content && res.content.length > 0) {
            this.content = res.content
            this.fId = res.fId;
            console.log(this.content)
          }
        },
        failRes => {
          console.log(11)
        }
      )
    },
    saveInfoContent() {
      let that = this
      if (this.content != 0) {
        if (this.content[0].value == 1) {
          if (this.content[0].isNeed == 1) {
            if (that.nameValue == '') {
              that.nameError = true
              console.log(that.nameError)
              return false;
            }
          }
        }
        if (this.content[1].value == 1) {
          if (this.content[1].isNeed == 1) {
            if (that.telValue == '') {
              that.telError = true
              console.log(that.telError)
              return false;
            }
            if (!utilJs.isPhoneNumber(that.telValue)) {
              this.$showCjToast({
                text: "请输入有效手机号",
                type: "warn",
              });
              return false;
            }
          }
        }
        if (this.content[2].value == 1) {
          if (this.content[2].isNeed == 1) {
            if (that.remarksValue == '') {
              that.remarError = true
              console.log(that.remarError)
              return false;
            }
          }
        }
      }
      if (!that.isClicking) {
        return;
      }
      that.isClicking = false;
      utilJs.postMethod(`${global.apiurl}livePrivateClass/${that.classId}/saveInfoContent`, {
        studentName: that.nameValue,
        studentMobile: that.telValue,
        remark: that.remarksValue,
        contentType: that.contentType,
      }, function (
        res
      ) {
        that.nameError = false
        that.isClicking = true;
        that.clickClassId()
      },
        failRes => {
          that.nameError = false
          that.isClicking = true;
        }
      );
    },
    submitForm(submitData) {
      if (!this.isClicking) {
        return;
      }
      this.isClicking = false;
      let data = {
        contentType: this.contentType,
        content: submitData.content,
        duration: submitData.duration
      };
      utilJs.postMethod(`${global.apiurl}livePrivateClass/${this.classId}/saveInfoContent`, data, res => {
        this.isClicking = true;
        this.$cjConfirm({
          message: '提交成功！',
          showCancelButton: false,
          onConfirm:() => {
            this.clickClassId()
          }
        })
      }, failRes => {
        this.isClicking = true;
      })
    },
    clickClassId() {
      if (this.isGoPay == 1) {
        let queryT = {
          extId: this.classId,
          ckFrom: global.ckFrom.privateClass,
          cId: 0,
        }
        // 限时购参数
        if (this.pId) {
          queryT.cId = -1;
          queryT.ckFrom = global.ckFrom.flashSalesPrivatclass;
          queryT.isFromInvite = 0;
          queryT.isFromOrder = 'TRUE';
          queryT.pId = this.pId;
        }
        this.$routerGo(this, "replace", {
          path: "/homePage/course/coursePay",
          query: queryT
        });
        return;
      }
      let toPath = `/homePage/privateClass/classDetail?classId=${this.classId}`;
      this.$routerGo(this, "replace", { path: toPath });
    },
  },
  activated() {
    this.nameValue = ''
    this.telValue = ''
    this.remarksValue = ''
    this.isGoPay = this.$route.query.isGoPay || 0;
    this.classId = this.$route.query.classId || '';
    this.pId = this.$route.query.pId || '';
    this.formInfo = {};
    if (!this.classId) {
      this.$showCjToast({
        text: "链接错误，无法找到该课程",
      });
      this.$router.go(-1);
      return;
    }
    this.getJoinInfo()
    setDocumentTitle("完善资料");
    this.wechatShare();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
input,
textarea {
  font-size: 0.6rem;
  border: 0;
  background: none;
  outline: none;
}

input:focus,
textarea:focus {
  outline: none;
}
.c-bd1-F56C6C {
  border: 1px solid #f56c6c;
}
</style>